<template>
    <div class="frame">
        <el-dialog
        :title="this.$t('h.importEthWallet')"
        :visible.sync="dialogVisible"
        width="500px"
        :before-close="close">
        <div class="form">
             <p>{{$t("h.chanceWalletType")}}</p>
             <div>
                 <ul>
                   <li  @click="chanceWallet('ETH')" :class="{borderstyle:coinName=='ETH'}">
                     <img src="../assets/images/ethUnit.png" alt="">
                     <p>{{$t("h.ethwallet")}}</p>
                     <div style="flex:1"></div>
                     <div class="coinconfirm" :class="{coinconfirm2:coinName=='ETH'}">
                     </div>
                   </li>
                   <!--<li @click="chanceWallet('BTC')" :class="{borderstyle:coinName=='BTC'}">-->
                     <!--<img src="../assets/images/btcUnit.png" alt="">-->
                     <!--<p>BTC钱包</p>-->
                     <!--<div style="flex:1"></div>-->
                     <!--<div class="coinconfirm" :class="{coinconfirm2:coinName=='BTC'}">-->
                     <!--</div>-->
                   <!--</li>-->
                 </ul>
             </div>
              <div class="content-button">
                <button @click="confirm">{{$t("h.import")}}</button>
              </div>
        </div>
        </el-dialog>
    </div>
</template>
<script>
import {addOuterAccount} from '../service/datxService'
export default{
    components:{},
    data(){
        return{
            dialogVisible: true,
            coinName:'ETH',
        }
    },
    methods:{
        close(){
            this.$emit('showHand', false,'close')
        },
        submitForm() {

        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
       chanceWallet(val){
           this.coinName=val
       },
       confirm(){

          if(this.coinName=='ETH'){
              this.$emit('showHand', false,"open");
          }
          else if(this.coinName=='BTC'){
              // let obj= addOuterAccount('BTC', "5KVUHLRekWCvaQcz32RUWe5eSJyCW2WhSttVtephApTMDpcYdV5", "DATX6JQXAF9rYhAKkRm641sDpoWLBChFSwudK8zPRunK8nMtDQn8uv", address, secret)
              // console.log(obj)
          }

       }

    }
}
</script>
<style lang="less" scoped>
.form{
    padding: 0 20px;
    p{

    }
    ul{
      list-style: none;
      min-height: 150px;
      li{
        margin: 20px 0;
        height: 66px;
        border: solid 1px #f7f7f8;
        background-color: #ffffff;
        display: flex;
        cursor: pointer;
        img{
          width: 30px;
          height: 30px;
          margin: 15px;
        }
        p{
          line-height: 60px;
        }

      }
      li:hover{
        border: solid 1px #98889b;
      }
      .borderstyle{
        border: solid 1px #98889b;
      }
      .coinconfirm{
        width: 34px;
        height: 34px;
        margin: 15px 8px;
        background-image: url( ../assets/images/select-2.png);
      }
      .coinconfirm2{
        width: 34px;
        height: 34px;
        margin: 15px 8px;
        background-image: url( ../assets/images/select-1.png);
        background-repeat: no-repeat;
        background-size: 100%;
      }
    }
    .content-button{
    margin: 22px 0;
    button{
      color:#fff;
      width: 100%;
      margin:  0 auto;
      display: block;
      border-radius: 4px;
      line-height:32px;
      text-align: center;
      background-color: #98889b;
      outline: none;
      border: none;
      cursor: pointer;
    }
    button:hover{
      opacity: .8;
    }
  }
}
.box .button{
    border-radius: 4px;
    border: none;
    background-color: #98889b;
    width: 100%;
    height: 41px;
    font-size: 14px;
    
    color: #fff;
}
</style>
<style lang="less" >
  .frame{
    .el-dialog__wrapper{
      .el-dialog{
        border-radius: 8px;
      }
      .el-dialog__header{
        border-bottom:1px solid #eaedf5;
        color:#000000;
        font-size: 18px;
        font-weight: bold;
        padding:20px;
      }
      .el-dialog__body{
        padding:30px 0;
      }
      .el-dialog__headerbtn .el-dialog__close{
        color: #666666;

      }
    }
}
</style>




